<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 13:44:08
-->
<template>
  <div ref="bottom3_container" style="height:90%"></div>
</template>
<script>
import { Bar } from '@antv/g2plot';

export default {
  data(){
    return {

    }
  },
  mounted() {
    this.initChart();
  },
  methods:{
    // 渲染图表
    initChart(){
      const data = [
        { year: '1956 年', value: 61 },
        { year: '1957 年', value: 145 },
        { year: '1958 年', value: 48 },
        { year: '1959 年', value: 136 },
        { year: '1960 年', value: 67 },
      ];
      const bar = new Bar(this.$refs.bottom3_container, {
        data,
        xField: 'value',
        yField: 'year',
        seriesField: 'year',
        legend: {
          position: 'top-left',
        },
      });
      bar.render();
    }
  }
}
</script>